<template>
	<view class="uni-tab-bar">
		<!-- 选项卡头部 -->
		<view class="glmoreTabBox">
			<view class="glmoreTab">
				<block>
					<view
						v-for="(tab,index) in tabBars"
						:key="tab.id"
						:class="tabIndex==index ? 'active' : ''"
						@click="tapTab(index)">
						{{tab.name}}
					</view>
				</block>
			</view>	
			<!-- 个人游记点击下拉 -->
		<!-- 	<view class="pullTc" v-if="isShowPullTc">
				<view class="pullTc-item"><text>个人游记</text></view>
				<view class="pullTc-item"><text>附近的人</text></view>
				<view class="pullTc-item"><text>关注的人</text></view>
			</view> -->
		</view>
		<!--选项卡内容-->
		<view>
		:current="tabIndex"
		:duration="300">
		<view>{{getTabIndex}}</view>
			<myOrder v-if="tabIndex == 0"></myOrder>
			<myNotPaying v-if="tabIndex == 1"></myNotPaying>
			<myNotTravel v-if="tabIndex == 2"></myNotTravel>
			<myNotEvaluation v-if="tabIndex == 3"></myNotEvaluation>
			<myNotRefund v-if="tabIndex == 4"></myNotRefund>
		</view>
	</view>
</template>

<script>
	import myOrder from '@/pages/my/myOrder/orders'
	import myNotPaying from '@/pages/my/myOrder/myNotPaying/noPaying'
	import myNotTravel from '@/pages/my/myOrder/myNotTravel/noTravel'
	import myNotEvaluation from '@/pages/my/myOrder/myNotEvaluation/noEvaluation'
	import myNotRefund from '@/pages/my/myOrder/myNotRefund/noRefund'
	
	export default {
		components:{
			myRoute,
			myselfTourNote,
			questionMade
		},
		data() {
			return {
				tabIndex: 0 ,//默认选中第一个tab 
				tabBars:[
					{name:'全部订单'},
					{name:'待付款'},
					{name:'未出行'},
					{name:'待评价'},
					{name:'待退款'}
				],
				isShowPullTc:false,
			}
		},
		methods:{
			tapTab(index){
				this.tabIndex = index;
				
			}
		},
		computed:{
			getTabIndex(){
				return this.$store.state.tabIndex;
				console.log(tabIndex);
			}
			
		}
	}
</script>

<style>
	.glmoreTabBox{
		position: relative;
	}
	.glmoreTab{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top:-82upx;
		margin-bottom: 40upx;
		
	}
	.glmoreTab > view{
		flex: 1;
		text-align: center;
		font-size: 24upx;
		color: #0075EE;
		line-height: 54upx;
		position: relative;
	}
	.glmoreTab > view:nth-child(2):after{
		content:"";
		display: inline-block;
		margin-left:10upx;
		margin-bottom: -6upx;
		border:10upx solid transparent;
		border-top-color: #55A0FF !important;
	}
	.glmoreTab .active{
		font-weight: bold;
	}
	.glmoreTab .active:before{
		content:"";
		width:102upx;
		height: 3upx;
		background:linear-gradient(left,#8EC6FF,#6592F7);
		display:block;
		margin: auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -66upx;
	}
	/*个人游记下拉样式 */
	.pullTc{
		width:140upx;
		height:160upx;
		border-radius:10upx;
		background-color: #fff;
		padding-top: 12upx;
		box-sizing: border-box;
		position: absolute;
		z-index: 10;
		top:44upx;
		left: 208upx;
		}
	.pullTc-item{
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		text-align: center;
		color: #666666;
		}
</style>
